<template>
  <div class="wrapper">
    <div class="header">
        <text class="title">{{title}}</text>
        <div class="renew">
            <text class="text">服务期至2019-05-25</text>
            <!-- <text class='button' size="mini">续费</text> -->
        </div>
    </div>
    <div class="main">
        <div class="month_left">
            <div class="year">
                <text class="year_select">{{year}}</text>
            </div>
            <div class="nav_left_items" v-for="(data,index) in navLeftItems" :key="data.id">
                <text :class="['month', curNav == data.id ? 'active' : '']" @click="changeTab(data.id)">{{data.text}}</text>
                <text class="line" v-if="index!== navLeftItems.length-1"></text>
            </div>
        </div>
        <div class="list_right">
            <div :class="['nav_right_clumn',index == 0 ? 'borderRight' : '']" v-for="(item,index) in navRightList" :key="item.id">
                <div :class="['nav_right_list',i == item.length-1 ? 'last' : '']" v-for="(part,i) in item" :key="part.id" @click="Jump(part.page)">
                    <div class='img'>
                        <image style="width: 100px; height: 100px;" :src="part.img"/>
                    </div>
                    <text class='nav_right_list_title'>{{part.name}}</text>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
let navigator = weex.requireModule('navigator');
let stream = weex.requireModule('stream');
const storage = weex.requireModule('storage');
export default {
    name: 'App',
    data () {
        return {
            navLeftItems: [  
                { id: 0, text: '1月' , month:'01'},
                { id: 1, text: '2月' , month:'02'},
                { id: 2, text: '3月' , month:'03'},
                { id: 3, text: '4月' , month:'04'},
                { id: 4, text: '5月' , month:'05'},
                { id: 5, text: '6月' , month:'06'},
                { id: 6, text: '7月' , month:'07'},
                { id: 7, text: '8月' , month:'08'},
                { id: 8, text: '9月' , month:'09'},
                { id: 9, text: '10月' , month:'10'},
                { id: 10, text: '11月' , month:'11'},
                { id: 11, text: '12月' , month:'12'},
            ],
            navRightList: [
                [{
                    name: '凭证',
                    img: 'voucher.png',
                    page: 'components/voucher'
                },{ 
                    name: '现金流量表',
                    img: 'cashFlowStatement.png', 
                    page:'components/cashFlowStatement' 
                },{
                    name: '余额表',
                    img: 'balance.png',
                    page: 'components/balance'
                },{
                    name: '纳税统计表',
                    img: 'taxEntry.png',
                    page: 'components/taxEntry'
                }],[{
                    name: '利润表',
                    img: 'incomeStatement.png',
                    page: 'components/incomeStatement'
                },{ 
                    name: '资产负债表', 
                    img: 'balanceSheet.png', 
                    page: 'components/balanceSheet'
                },{ 
                    name: '明细账',
                    img: 'subsidiaryLedger.png', 
                    page: 'components/subsidiaryLedger'
                },{
                    name: '报税回执',
                    img: 'taxReceipt.png',
                    page: 'components/taxReceipt'
                }]
            ],
            curNav:0,
            title: '上海卓顾信息科技有限公司',
            year:'2017'
        }
    },
    created(){
        this.post('api/accounts/login',{
            loginId: 'wly',
            hashPassword: 'admin'
        }, res => {
            console.log(res)
        });
        let date = this.year + this.navLeftItems[this.curNav].month;
        storage.setItem('date',date)

        for(let i=0;i<this.navRightList.length;i++){
            for(let j=0;j<this.navRightList[i].length;j++){
                this.navRightList[i][j].img = this.getPicUrl(this.navRightList[i][j].img)
            }
        }
    },
    methods:{
        changeTab(id){
            this.curNav = id
        },
        Jump(page){
            navigator.push({
                url: this.setBundleUrl(page)
            });
        },
        setBundleUrl(page) {
            let bundleUrl = weex.config.bundleUrl; 
            bundleUrl = new String(bundleUrl);
            let host = '';
            let path = '';
            let nativeBase;
            let newUrl;
            const isAndroidAssets = bundleUrl.indexOf('your_current_IP') >= 0 || bundleUrl.indexOf('file://assets/') >= 0;
            const isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;
            if (isAndroidAssets) {
                nativeBase = 'file://assets/dist/';
                newUrl = nativeBase + page + ".js"; 
            } else if (isiOSAssets) {
                nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
                newUrl = nativeBase + page + ".js"; 
            } else {
                const matches = /\/\/([^\/]+?)\//.exec(bundleUrl);
                const matchFirstPath = /\/\/[^\/]+\/([^\/\s]+)\//.exec(bundleUrl);
                if (matches && matches.length >= 2) {
                    host = matches[1];
                }
                if (matchFirstPath && matchFirstPath.length >= 2) {
                    path = matchFirstPath[1];
                }
                nativeBase = 'http://' + host + '/';
                let platform = weex.config.env.platform;
                if (platform.toLowerCase()!=='web') { 
                    nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
                    newUrl = nativeBase + page + ".js";
                }else{
                    newUrl = nativeBase + page + ".html";
                }
            }
            return newUrl;
        },
        getPicUrl(param){
            let bundleUrl = weex.config.bundleUrl; 
            bundleUrl = new String(bundleUrl); 
            let platform = weex.config.env.platform;
            var nativeBase;  
            var native;   

            if (platform.toLowerCase()!=='web') {  
                nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1)
                native = nativeBase + 'assets/image/' + param;  
            }  else {   
                nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1)
                native = nativeBase.replace('components/','') + 'assets/image/' + param; 
            }  
            return native;  
        },
        post(api, param, callback) {
            return stream.fetch({
                method: 'POST',
                type: 'json',
                url: 'https://fc.wx133.com:8501/'+api,
                headers: {
                    version: storage.getItem('version'),
                    token: storage.getItem('token'),
                    'Content-Type':'application/json'
                },
                body: JSON.stringify(param)
            }, callback)
        }
    }
}
</script>

<style scoped>
.wrapper{
    flex: 1;
}
.header{
    height: 140px
}
.title{
    flex: 1;
    height: 90px;
    line-height: 90px;
    text-align: center;
    font-weight: bold;
    font-size: 38px;
}
.renew{
    height: 50px;
}
.text{
    background-color: #4fcad7;
    position: absolute;
    width: 300px;
    left: 250px;
    height: 50px;
    line-height: 50px;
    font-size: 28px;
    color: #ffffff;
    border-radius: 5px;
    text-align: center;
}
/* .button{
    background-color: #94cf28;
    position: absolute;
    width: auto;
    left: 500px;
    height: 50px;
    line-height: 50px;
    font-size: 28px;
    padding-left: 20px;
    padding-right: 20px;
    color: #fff;
    border-radius: 5px;
} */
.main{
    flex-direction: row;
    margin-top: 10px;
    flex: 1;
}
.month_left{
    width: 186px;
}
.nav_left_items{
    height: 80px;
    align-items: center;
}
.year{
    height: 60px;
    align-items: center;
}
.year_select{
    height: 50px;
    width: 100px;
    border-width: 2px;
    border-color: #47c8d7;
    border-style:solid;
    border-radius: 30px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
}
.month{
    width: 52px;
    height: 52px;
    text-align: center;
    border-radius: 26px;
    line-height: 52px;
    font-size: 20px;
}
.active{
    background-color: #47c8d7;  
    color: #ffffff;
}
.line{
    width: 2px;
    height: 28px;
    background-color: #d7d7d7;
}
.list_right{
    flex: 1;
    border-width: 2px;
    border-color: #d7d7d7;
    border-style: solid;
    border-right-width: 0;
    border-bottom-width: 0;
    flex-direction: row;
}
.nav_right_clumn{
    flex: 1;
}
.borderRight{
    border-right-width: 2px;
    border-right-color: #d7d7d7;
}
.last{
    border-bottom-width: 0;
}
.nav_right_list{
    flex: 1;
    align-items: center;
    justify-content:center;
    border-bottom-width: 2px;
    border-bottom-color: #d7d7d7;
}

.img{
    width: 100px;
    height: 100px;
}
.nav_right_list_title{
    height: 70px;
    line-height: 70px;
}
</style>
